import React, { useState } from 'react'
import { Button, Form, Input, DatePicker, Select } from 'antd'
const App = (props) => {
  const [form] = Form.useForm()
  const [typeList, setTypeList] = useState(props.typeList)
  const upData = (data) => {
    props.porpsData(data)
  }
  return (
    <Form
      labelCol={{
        span: 6
      }}
      wrapperCol={{
        span: 14
      }}
      layout="inline"
      form={form}
      onFinish={upData}
      style={{
        maxWidth: 'none'
      }}
    >
      {typeList.map((item, index) => {
        if (item.type == 'inpute') {
          return (
            <Form.Item
              style={{ margin: '10px' }}
              name={item.model}
              label={`${item.title}:`}
              key={index}
            >
              <Input placeholder={`请输入${item.title}`} />
            </Form.Item>
          )
        } else if (item.type == 'select') {
          return (
            <Form.Item
              style={{ margin: '10px' }}
              label={`${item.title}:`}
              key={index}
              name={item.model}
            >
              <Select style={{ width: '150px' }} options={item.options} />
            </Form.Item>
          )
        } else if (item.type == 'date') {
          return (
            <Form.Item
              style={{ margin: '10px' }}
              name={item.model}
              label={`${item.title}:`}
              key={index}
            >
              <DatePicker format="YYYY-MM-DD" />
            </Form.Item>
          )
        }
      })}
      <Form.Item style={{ margin: '10px' }}>
        <Button type="primary" htmlType="submit">
          搜索
        </Button>
      </Form.Item>
    </Form>
  )
}
export default App
